/* eslint-disable max-lines */
import * as BASE from '@/stores/definitions-base';
import { t } from '@lingui/macro';
import React from 'react';
import { ellipsisRender } from '@/components/TauTable';
import { Input, List, Switch, Tag, Radio, NumberPicker, DatePicker, TimePicker2, DatePicker2 } from '@alifd/next';
import TauSimpleSelect from '@/components/TauSimpleSelect';

const RadioGroup = Radio.Group;

const {
  DATETIME_TEXT,
  DATE_TEXT,
  TIME_TEXT,
  EMPTY_TEXT,
  ENUMS: ENUMSBase,
  FieldsGrid: FieldGridBase,
  TitleGrid,
  column: columnBase,
  toSelectDataSource,
} = BASE;
export { DATETIME_TEXT, DATE_TEXT, EMPTY_TEXT, TIME_TEXT, TitleGrid, toSelectDataSource };

/**
 * @param {*} path        属性path
 * @param {*} props       column属性
 * @returns column定义
 */
export function column(...args) {
  return columnBase(xcxModal, ...args);
}

/**
 * 显示一组表单字段
 * ```js
 * {
 *   fields: string[],    // 字段名称，可以使用.来指定嵌套对象属性，例如order.busOrder.shift
 *   columns: number,     // 列数，默认为4,最大为12,最小为1
 *   model: object,       // 字段定义数据模型的根对象，默认不指定，仅在使用子对象作为根模型时设置
 *   overrideModel: object, // 重载字段定义数据模型
 *   mode: string,        // 表单模式，默认为edit，可选view
 *   itemLayout: object,  // FormItem布局配置，默认为{}
 * }
 * ```
 *
 * @param {object} param0
 * @returns
 */
export function FieldsGrid(props) {
  return <FieldGridBase model={xcxModal} {...props} />;
}

//----------------------------------------------------------------------
export const ENUMS = {
  ...ENUMSBase,
  // <br/> 0 - 未读; 1 - 已读
  status: {
    1: { name: t`已读`, color: 'blue' },
    0: { name: t`未读`, color: 'orange' },
  },
  // normal - 普通通知; headline - 置顶通知
  type: {
    normal: t`普通通知`,
    headline: t`置顶通知`,
  },
  // <br/> app - 内部通知<br/> email - 邮件通知<br/> sms - 短信通知<br/> wx - 微信通知<br/> 可同时指定多个发送类别
  sendTypes: {
    app: t`内部通知`,
    email: t`邮件通知`,
    sms: t`短信通知`,
    wx: t`微信通知`,
  },
};

/**
 * 模型定义：
 * 1. 普通文本仅需要定义label
 * 2. 需要通过枚举转换的值，定义text; 当使用renderer返回组件时，text属性无效，需要通过组件的renderPreview来指定预览时的绘制方式
 * 3. 通用的ui属性需要定制时，定义ui; 特定模式(view, edit, add)下的ui，添加后缀定义为ui_<mode>，例如：ui_view, ui_edit, ui_add, ui_table
 * 4. ui可配置属性包括:
 *    renderer: 内容渲染函数, Form表单中的原型为：(value: any, formData: any, fieldDefinition: any) => ReactNode; Table Column中的原型为: (value: any, columnIndex: number, rowData: any) => ReactNode;
 *    itemProps: 表单Form.Item的属性，可以是对象，或函数({ isPreview: boolean, mode: string, value: any, formData: any, ...otherDefinitions}) => void;
 *    span: Grid Cell占用的列数, 默认为1
 *
 * 【注】获取接口的model定义后，vscode中通过正则替换：^(\s+)"label": "([^']+)"  ===> $1label: t`$2`
 */
export const xcxModal = {
  id: {
    label: t`通知标识`,
  },
  scope: {
    label: t`相关应用Scope`,
  },
  sender: {
    label: t`发送者帐号`,
  },
  recipient: {
    label: t`接收者帐号`,
    text: (v) => ellipsisRender(v),
  },
  subject: {
    label: t`通知主题`,
    text: (v) => ellipsisRender(v),
    ui: {
      itemProps: { required: true },
    },
  },
  content: {
    label: t`通知内容`,
    text: (v) => ellipsisRender(v),
    ui: {
      renderer: (v) => <Input.TextArea value={v} />,
      itemProps: { required: true },
    },
  },
  businessKey: {
    label: t`关联的业务标识`,
  },
  type: {
    label: t`类型`,
    text: (v) => ENUMS.type[v],
    ui: {
      renderer: (v) => <TauSimpleSelect value={v} dataSource={toSelectDataSource(ENUMS.type)} />,
      itemProps: { required: true },
    },
  },
  params: {
    label: t`通知参数`,
    ui: {
      renderer: (v) => {
        const res = Object.entries(v || {})?.map(([key, value]) => ({
          label: key,
          value: JSON.stringify(value),
        }));
        return (
          <List
            size="small"
            dataSource={res}
            style={{ marginTop: -15 }}
            renderItem={(item, i) => <List.Item key={`${i}_1`} extra={item.value} title={`${item.label}`} />}
          />
        );
      },
    },
  },
  status: {
    label: t`状态`,
    text: (v) => (
      <Tag key={`p_p_${ENUMS.status[v].color}`} type="normal" size="small" color={ENUMS.status[v].color}>
        {ENUMS.status[v].name}
      </Tag>
    ),
    ui: {
      renderer: (v) => <Switch checked={v} checkedChildren="启用" unCheckedChildren="禁用" autoWidth />,
    },
  },
  sendTypes: {
    label: t`通知发送类别`,
    text: (v) =>
      v?.map((p) => (
        <>
          <span>{ENUMS.sendTypes[p]}</span>
          {v?.length > 1 && <br />}
        </>
      )),
    ui: {
      renderer: (v) => <TauSimpleSelect value={v} mode="multiple" dataSource={toSelectDataSource(ENUMS.sendTypes)} />,
      itemProps: { required: true },
    },
  },
  crDate: {
    label: t`创建时间`,
    text: DATETIME_TEXT,
  },
  tenantId: {
    label: t`租户ID`,
  },

  // 前端新增字段
  sendType: {
    label: t`通知模式`,
    ui: {
      renderer: (v) => (
        <RadioGroup value={v} aria-labelledby="groupId">
          <Radio id="day" value="day">
            {t`按天通知`}
          </Radio>
          <Radio id="time" value="assignDay">
            {t`固定周期`}
          </Radio>
        </RadioGroup>
      ),
    },
  },
  popupType: {
    label: t`弹窗模式`,
    ui: {
      renderer: (v) => (
        <RadioGroup value={v} aria-labelledby="groupId">
          <Radio id="day" value="1">
            {t`已读不弹`}
          </Radio>
          <Radio id="time" value="0">
            {t`重复弹窗`}
          </Radio>
        </RadioGroup>
      ),
    },
  },
  period: {
    label: t`日期周期`,
    ui: {
      renderer: (v) => <DatePicker2.RangePicker value={v} format="YYYY-MM-DD" hasClear outputFormat={DATE_TEXT} />,
    },
  },
  weekdays: {
    label: t`固定周期`,
    ui: {
      renderer: (v) => (<TauSimpleSelect
        value={v}
        mode="multiple"
        dataSource={
          [
            { label: t`周一`, value: 1 },
            { label: t`周二`, value: 2 },
            { label: t`周三`, value: 3 },
            { label: t`周四`, value: 4 },
            { label: t`周五`, value: 5 },
            { label: t`周六`, value: 6 },
            { label: t`周日`, value: 7 },
          ]
        }
      />),
    },
  },
  recipients: {
    label: t`接收者列表`,
    ui: {
      itemProps: { required: true },
    },
  },
  addRecipients: {
    label: t`添加接收者`,
  },
};
